<%--
  Created by IntelliJ IDEA.
  User: lixin
  Date: 2022/12/29
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>postalCode</title>

    <script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        <%--window.onload = function (){--%>
        <%--    //获取邮政编码文本框的js对象--%>
        <%--    var postalCode = document.getElementById("postalCode");--%>

        <%--    //对邮政编码绑定键盘抬起事件--%>
        <%--    postalCode.onkeyup = function (){--%>
        <%--        //1.创建对象的实例化对象--%>
        <%--        var xhr = new XMLHttpRequest();--%>

        <%--        //2.创建连接--%>
        <%--        xhr.open(--%>
        <%--            "post",--%>
        <%--            "<%=request.getContextPath()%>/postalCode?postalCode="+postalCode.value,--%>
        <%--            false--%>
        <%--        )--%>

        <%--        //3.设置回调函数，用来接收servlet响应的数据--%>
        <%--        xhr.onreadystatechange = function (){--%>

        <%--            //如果发送状态为已经响应完毕，用户可以处理数据的状态--%>
        <%--            //并且响应状态码为200 一切正常，可以获取响应数据--%>
        <%--            if(xhr.readyState==4 && xhr.status==200){--%>

        <%--                //获取响应回来的数据--%>
        <%--                var backInfo = xhr.responseText;--%>

        <%--                //对返回的结果 (黑龙江,哈尔滨) 进行拆分--%>
        <%--                var provinceAndCity = backInfo.split(",");--%>

        <%--                //对省市分别设置--%>
        <%--                document.getElementById("province").value = provinceAndCity[0];--%>
        <%--                document.getElementById("city").value = provinceAndCity[1];--%>

        <%--            }--%>

        <%--        }--%>

        <%--        alert("ajax")--%>

        <%--        //4.发送请求--%>
        <%--        xhr.send();--%>
        <%--    }--%>
        <%--}--%>


        $(function (){

            //对邮政编码的文本框绑定键盘松开事件
            $("#postalCode").keyup(function (){
                $.post(
                    "<%=request.getContextPath()%>/postalCode",
                    {postalCode:$("#postalCode").val()},
                    function (data){
                        $("#province").val(data.province);
                        $("#city").val(data.city);
                    },
                    "json"
                )
            })

        })


    </script>
</head>
<body>

    <table border="1" align="center">

        <tr>
            <td>邮政编码：</td>
            <td><input type="text" id="postalCode" name="postalCode"></td>
        </tr>
        <tr>
            <td>省份：</td>
            <td><input type="text" id="province" name="province" readonly></td>
        </tr>
        <tr>
            <td>城市：</td>
            <td><input type="text" id="city" name="city" readonly></td>
        </tr>

    </table>


</body>
</html>
